<template>
  <div class="ytccTrans_wrap">
    <headTop :headClass="'white_header'">
      Cross rotation
    <router-link tag="span" to="transRecord" slot="right" class="header_right">Record</router-link>
    </headTop>
    <div class="balance">
      <span class="mine">availableYTCC</span>
      <span class="money">{{balance}} YTCC</span>
    </div>
    <div class="other_msg">
      <div class="msg_title">Each other's information</div>
      <label for="account" class="info">
        <span>UID Account</span>
        <input type="number" id="account" placeholder="Please input UID Account" v-model="uId">
      </label>
      <label for="phone" class="info phone">
        <span>Phone number</span>
        <input type="tel" id="phone" placeholder="Please input Four after phone call" v-model="phone">
      </label>
    </div>
    <div class="turn_out">
      <div class="turn_out_title">
        <span>Transfer quantity</span>
        <!-- <div class="sel_country" @click="selCountry">
          <span>{{country}}</span>
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div> -->
      </div>
      <div class="input_wrap">
        <input type="number" placeholder="Please input the amount transferred" v-model="money" @input="clearNum">
      </div>
      <div class="exchange">
        <span class="left">Turn outYTCC</span>
        <span class="right">{{RMB}} YTCC</span>
      </div>
    </div>
    <div class="submit">
      <span class="public_btn" @click="submit">Confirmation of cross rotation</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ytccTrans',
  data () {
    return {
      balance: '',
      money: '',
      uId: '',
      phone: '',
      unit: '',
      countryIndex: '',
      proportion: ''
    };
  },
  computed: {
    RMB () {
      if (this.money) {
        return (parseFloat(this.money) * parseFloat(this.proportion)).toFixed(2);
      } else {
        return '0.00';
      }
    },
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  mounted () {
    if (localStorage.uid) {
      this.uId = localStorage.getItem('uid');
      localStorage.removeItem('uid');
    }
    if (localStorage.phone) {
      this.phone = localStorage.getItem('phone');
      localStorage.removeItem('phone');
    }
    this.getBalance();
  },
  methods: {
    // Clear the two decimal places.
    clearNum () {
      if (/\./g.test(this.money) && this.money.toString().split('.')[1].length > 2) {
        this.money = this.money.substr(0, this.money.length - 1);
      }
    },
    // Check out
    submit () {
      if (!this.uId) {
        this.Toast('Please input UID Account');
      } else if (!this.phone) {
        this.Toast('Please input Four after phone call');
      } else if (!/^\d{4}$/.test(this.phone)) {
        this.Toast('Please input Four after phone call');
      } else if (!this.money) {
        this.Toast('Please input the quantity transferred');
      } else if (parseFloat(this.money) <= 0) {
        this.Toast('Illegal quantity transferred');
      } else if (parseFloat(this.RMB) > parseFloat(this.balance)) {
        this.Toast('Sorry, your credit is running low');
      } else {
        this.isSetPwd();
      }
    },
    // ObtainYTCC
    getBalance () {
      this.axios.post('index/Transferytcc/transfer').then(({data}) => {
        if (data.status === 200) {
          this.balance = data.data.ytcc; // YTCCNumber
          this.proportion = data.data.propor; // Transfer ratio
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Submission
    confirm () {
      this.axios.post('index/Transferytcc/transfer_exe', {
        uid: this.uId,
        ytcc: this.money,
        pass: this.passWord,
        mobile: this.phone
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Turn out to be successful');
          this.$router.push({name: 'transRecord', query: {index: 1}});
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.ShowPassword(() => {
            this.confirm();
          });
        } else {
          this.Modal('Set transaction password', 'Only after setting the transaction password can you purchase the operation., Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .ytccTrans_wrap{
    padding-top: 110px;
    background-color: #f5f5f5;
    .balance{
      width: 100%;
      height: 108px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 28px;
      color: #282828;
      background-color: #fff;
      .mine{
        font-size: 28px;
      }
      .money{
        font-size: 30px;
      }
    }
    .other_msg{
      width: 100%;
      margin-bottom: 20px;
      .msg_title{
        width: 100%;
        height: 90px;
        line-height: 90px;
        padding-left: 30px;
        color: #999;
        font-size: 28px;
      }
      .info{
        width: 100%;
        height: 108px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        font-size: 28px;
        color: #282828;
        background-color: #fff;
        border-bottom: 1px solid #e6e6e6;
        input{
          flex: 1;
          height: 100%;
          line-height: 108px;
          text-align: right;
          font-size: 28px;
          color: #282828;
          &::placeholder{
            color: #999;
            font-size: 28px;
          }
        }
        &.phone{
          border-bottom: none;
        }
      }
    }
    .turn_out{
      width: 100%;
      background-color: #fff;
      padding: 0 32px;
      margin-bottom: 100px;
      .turn_out_title{
        width: 100%;
        height: 86px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        color: #999;
        .sel_country{
          display: flex;
          align-items: center;
          >span{
            font-size: 26px;
            color: $color;
            margin-right: 10px;
          }
          .iconfont{
            font-size: 24px;
            color: #999;
            margin-top: 2px;
          }
        }
      }
      .input_wrap{
        width: 100%;
        height: 106px;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
        input{
          font-size: 60px;
          color: #282828;
          line-height: 106px;
          padding-left: 42px;
          width: 100%;
          height: 100%;
          &::placeholder{
            font-size: 30px;
            color: #999;
          }
        }
        &::before{
          display: block;
          content: '';
          width: 2px;
          height: 50px;
          background-color: #999;
          position: absolute;
          bottom: 30px;
          left: 10px;
        }
      }
      .exchange{
        width: 100%;
        height: 106px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          font-size: 28px;
          color: #282828;
          .auto{
            color: #999;
          }
        }
        .right{
          font-size: 30px;
          color: #282828;
        }
      }
    }
    .submit{
      width: 100%;
      text-align: center;
      .public_btn {
        box-shadow: 0px 0px 10px 10px #f6ebd2;
      }
    }
  }
</style>
